<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Marker Animations</title>
<style type="text/css">
html {
	height: 100%
}

body {
	height: 100%;
	margin: 0;
	padding: 0
}

#map-canvas {
	height: 75%
}
#demo {
	height: 25%
}


</style>

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRgvR0Z0hpry7rrlQ7nPq8QIR-NZITPLA&v=3.exp&sensor=false"></script>
    <script>

var marker;
var map;
var currentMarker;

var showPosition = function (position) {
  	var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    currentMarker = new google.maps.Marker({
        position: userLatLng,
        draggable:true,
        map: map
    });
    google.maps.event.addListener(currentMarker, 'dragend', handleCurrentAddress);
    map.panTo(currentMarker.getPosition());
}

function handleCurrentAddress() {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({'latLng': currentMarker.getPosition()}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
    	  $("div#demo").text(results[0].formatted_address);
      } else {
        alert("Geocoder failed due to: " + status);
      }
    });
}

function initialize() {
  var mapOptions = {
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  
  map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);  
 
  navigator.geolocation.getCurrentPosition(showPosition); 
}


google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
    <div id="demo">sadasda</div>
  </body>
</html>